<template>
  <div class="knowledge_search">
    <c-title :hide="false" :text="'知识库目录'"></c-title>
    <div class="search" v-if="showSearch">
      <img v-if="logo_url" :src="logo_url" style="width: 1.6rem; height: 1.6rem;" alt="">
      <van-search @click="linkto" :readonly="true" shape="round" style="padding: 0 10px; width: 100%;" placeholder="请输入搜索关键词" />
    </div>
    <div class="header-box">
      <div class="title" v-if="base&&base.name">{{base.name}}</div>
      <div style="text-align: center;" v-if="userList&&userList.length>0">
        <van-image round class="img" v-for="(img,i) in userList" :key="i" :src="img.avatar" />
      </div>
    </div>
    <collapse :plu="plugin" v-if="article_list && article_list.length>0" :base_id="this.$route.query.base_id" :list="article_list" :catalogueProps="catalogueProps"></collapse>
    <div style="margin: 0 auto;" v-if="article_list.length <= 0">
      <van-empty description="暂无数据" />
    </div>
  </div>
</template>

<script>
import { Image as VanImage } from "vant";

export default {
  data() {
    return {
      article_list: [],
      base: {},
      logo_url: "",
      userList: [],
      showSearch: true,//是否显示搜索框
      catalogueProps: {},
      plugin: 'message-base',//message-base商城知识库，project-template供应链知识库
    };
  },
  components: {
    collapse: () => import("./components/index"),
    VanImage
  },
  activated() {
    this.userList = [];
    this.init();
    this.getdata();
  },
  methods: {
    init() {
      let api = new Map([
        ["message-base", {
          index: 'plugin.message-base.frontend.article.baseArticle',
          params: ()=>{
            return {base_id: this.$route.query.base_id}
          },
          showSearch: true,
          list: {
            label: "article_list",
            children: "article_name",
          },
          catalogueProps: {
            label: "article_name",
            children: "child",
          },
          callback:(res)=>{}}
        ],
        ["project-template", {
          index: 'plugin.project-template.frontend.knowledge.knowledgeBaseCatalog',
          params: ()=>{
            return {id: this.$route.query.base_id}
          },
          showSearch: false,
          list: {
            label: "knowledgeBaseArticle",
            children: "title",
          },
          catalogueProps: {
            label: "title",
            children: "has_many_yz_supply_knowledge_base_article",
          },
          callback:(res)=>{}}
        ],
      ]);
      if(this.$route.query.plu) {
        this.plugin = this.$route.query.plu;
      }
      this.apiOption = api.get(this.plugin);
      this.catalogueProps = this.apiOption.catalogueProps;
      this.showSearch = this.apiOption.showSearch;
    },
    linkto() {
      this.$router.push(this.fun.getUrl("knowledgeSearch", {}, {plu: this.plugin}));
    },
    getdata() {
      let base_id = this.$route.query.base_id;
      // 处理上下章
      let {knowledge} = this.$store.state;
      if (knowledge.baseArticle&&knowledge.base_id==base_id) {
        let res = knowledge.baseArticle;
        this.logo_url = res.data.logo||'';
        this.article_list = res.data[this.apiOption.list.label] || [];
        this.article_list = this.article_list.filter(r => {
          return r[this.apiOption.list.children] != "";
        });
        this.base = res.data.base;
        if(res.data.manager_list) {
          this.userList.push(res.data.manager_list || {});
        }
        this.userList = this.userList.concat(res.data.member_list || []);
        return false;
      }
      // 处理上下章 end
      $http.get(this.apiOption.index, this.apiOption.params(),'.').then(res => {
        this.logo_url = res.data.logo;
        this.article_list = res.data[this.apiOption.list.label] || [];
        this.article_list = this.article_list.filter(r => {
          return r[this.apiOption.list.children] != "";
        });
        this.base = res.data.base;
        if(res.data.manager_list) {
          this.userList.push(res.data.manager_list || {});
        }
        this.userList = this.userList.concat(res.data.member_list || []);
        this.$store.commit("setBaseArticle", {res,base_id});
      });
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .knowledge_search {
    background-color: #eff0f1;
    text-align: left;
    width: 100%;
    min-height: 100vh;

    .search {
      width: 100%;
      padding: 0.6rem 0.8rem;
      display: flex;
      align-items: center;
      background-color: #fff;

      ::v-deep .van-search__content {
        border-radius: 15px;
      }
    }

    .header-box {
      margin: 0.6rem 0.8rem;
      border-radius: 5px;
      background-color: #fff;

      .title {
        font-size: 15px;
        text-align: center;
        padding: 1rem 0;
      }

      .img {
        margin-bottom: 1rem;
        width: 1.6rem;
        height: 1.6rem;
      }
    }
  }
</style>
